<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>板块成分股数据列表</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/antd@5.0.0/dist/reset.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            color: #1a1a1a;
            font-size: 24px;
        }
        .header .actions {
            display: flex;
            gap: 10px;
        }
        .button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .button-primary {
            background-color: #1890ff;
            color: white;
        }
        .button-primary:hover {
            background-color: #40a9ff;
        }
        .button-default {
            background-color: #f0f0f0;
            color: #333;
        }
        .button-default:hover {
            background-color: #e6f7ff;
        }
        .content {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .filter {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #fafafa;
            border-radius: 4px;
        }
        .filter input {
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            margin-right: 10px;
            font-size: 14px;
        }
        .table-container {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        th {
            background-color: #fafafa;
            font-weight: 600;
            color: #333;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-valid {
            background-color: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        .status-invalid {
            background-color: #fff2f0;
            color: #ff4d4f;
            border: 1px solid #ffccc7;
        }
        .market-label {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        .market-sz {
            background-color: #e6f7ff;
            color: #1890ff;
        }
        .market-sh {
            background-color: #fff1f0;
            color: #ff4d4f;
        }
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
            color: #999;
        }
        .message {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            font-size: 14px;
        }
        .message-success {
            background-color: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }
        .message-error {
            background-color: #fff2f0;
            color: #ff4d4f;
            border: 1px solid #ffccc7;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>板块成分股数据列表</h1>
            <div class="actions">
                <button class="button button-primary" id="fetchBtn">手动抓取数据</button>
                <button class="button button-default" id="refreshBtn">刷新数据</button>
                <button class="button button-default" id="statisticsBtn">数据统计</button>
            </div>
        </div>
        
        <div id="messageDiv" style="display: none;"></div>
        
        <div class="content">
            <div class="filter">
                <label for="blockCode">板块代码：</label>
                <input type="text" id="blockCode" placeholder="请输入板块代码" />
                <button class="button button-default" id="searchBtn">搜索</button>
                <button class="button button-default" id="clearBtn">清空</button>
            </div>
            
            <div class="table-container">
                <table id="dataTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>市场</th>
                            <th>股票代码</th>
                            <th>股票名称</th>
                            <th>所属板块代码</th>
                            <th>数据来源</th>
                            <th>更新时间</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody id="dataBody">
                        <tr class="loading">
                            <td colspan="8">加载中...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <script>
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            loadData();
            
            // 绑定事件
            document.getElementById('fetchBtn').addEventListener('click', fetchData);
            document.getElementById('refreshBtn').addEventListener('click', loadData);
            document.getElementById('statisticsBtn').addEventListener('click', function() {
                window.location.href = '/blockposition/statistics';
            });
            document.getElementById('searchBtn').addEventListener('click', loadData);
            document.getElementById('clearBtn').addEventListener('click', function() {
                document.getElementById('blockCode').value = '';
                loadData();
            });
        });
        
        // 加载数据
        function loadData() {
            const blockCode = document.getElementById('blockCode').value.trim();
            const url = blockCode ? `/blockposition/data?blockCode=${encodeURIComponent(blockCode)}` : '/blockposition/data';
            
            showLoading();
            hideMessage();
            
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.json();
                })
                .then(data => {
                    renderTable(data);
                })
                .catch(error => {
                    showError('加载数据失败：' + error.message);
                    showEmptyTable();
                });
        }
        
        // 渲染表格
        function renderTable(data) {
            const tbody = document.getElementById('dataBody');
            tbody.innerHTML = '';
            
            if (!data || data.length === 0) {
                showEmptyTable();
                return;
            }
            
            data.forEach(item => {
                const row = document.createElement('tr');
                
                // 格式化更新时间
                const updateTime = new Date(item.updateTime).toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit'
                });
                
                // 市场标签
                const marketLabel = item.marketCode === 1 ? 
                    '<span class="market-label market-sz">深市</span>' : 
                    '<span class="market-label market-sh">沪市</span>';
                
                // 状态标签
                const statusLabel = item.valid ? 
                    '<span class="status status-valid">有效</span>' : 
                    '<span class="status status-invalid">无效</span>';
                
                row.innerHTML = `
                    <td>${item.id || '-'}</td>
                    <td>${marketLabel}</td>
                    <td>${item.code}</td>
                    <td>${item.name}</td>
                    <td>${item.blockCode}</td>
                    <td>${item.dataSource || '-'}</td>
                    <td>${updateTime}</td>
                    <td>${statusLabel}</td>
                `;
                
                tbody.appendChild(row);
            });
        }
        
        // 显示空表格
        function showEmptyTable() {
            const tbody = document.getElementById('dataBody');
            tbody.innerHTML = `
                <tr>
                    <td colspan="8" style="text-align: center; color: #999; padding: 40px;">暂无数据</td>
                </tr>
            `;
        }
        
        // 显示加载中
        function showLoading() {
            const tbody = document.getElementById('dataBody');
            tbody.innerHTML = `
                <tr class="loading">
                    <td colspan="8">加载中...</td>
                </tr>
            `;
        }
        
        // 抓取数据
        function fetchData() {
            const fetchBtn = document.getElementById('fetchBtn');
            fetchBtn.disabled = true;
            fetchBtn.textContent = '抓取中...';
            
            hideMessage();
            
            fetch('/blockposition/fetch', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    showSuccess(result.message);
                    // 重新加载数据
                    setTimeout(loadData, 1000);
                } else {
                    showError(result.message);
                }
            })
            .catch(error => {
                showError('抓取数据失败：' + error.message);
            })
            .finally(() => {
                fetchBtn.disabled = false;
                fetchBtn.textContent = '手动抓取数据';
            });
        }
        
        // 显示成功消息
        function showSuccess(message) {
            const messageDiv = document.getElementById('messageDiv');
            messageDiv.className = 'message message-success';
            messageDiv.textContent = message;
            messageDiv.style.display = 'block';
        }
        
        // 显示错误消息
        function showError(message) {
            const messageDiv = document.getElementById('messageDiv');
            messageDiv.className = 'message message-error';
            messageDiv.textContent = message;
            messageDiv.style.display = 'block';
        }
        
        // 隐藏消息
        function hideMessage() {
            document.getElementById('messageDiv').style.display = 'none';
        }
    </script>
</body>
</html>